<template>
	<view class="u-page">
		<view>
			<image src="/static/enroll.jpeg" mode="" style="width:100%;height:240rpx;"></image>
		</view>
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left":model="model1" ref="form1" >
					<u-form-item label="幼儿姓名:" prop="name" borderBottom  labelWidth="80" :labelStyle="labelStyle">
						<u--input v-model="model1.name" border="none" placeholder="姓名,只能为中文(必填)"></u--input>
					</u-form-item>
					
					<u-form-item label="幼儿性别:" prop="sex" borderBottom @click="showSex = true; hideKeyboard()"  labelWidth="80">
						<u--input v-model="model1.sex" disabled disabledColor="#ffffff" placeholder="请选择性别(必填)" border="none" ></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="出生日期" prop="hotel" labelWidth="80" borderBottom @click="showBirthday = true; hideKeyboard()" >
						<u--input v-model="model1.born_date" disabled disabledColor="#ffffff" placeholder="请选择日期(必填)" border="none" ></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="所报年级" prop="grade" labelWidth="80" borderBottom @click="showGrade = true; hideKeyboard()" >
						<u--input v-model="model1.grade" disabled disabledColor="#ffffff" placeholder="请选择年级(必填)" border="none" ></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="监护人:" prop="guardian" borderBottom @click="showGuardian = true; hideKeyboard()"  labelWidth="80">
						<u--input v-model="model1.guardian" disabled disabledColor="#ffffff" placeholder="请选择监护人(必填)" border="none" ></u--input>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="联系方式:" prop="phone" borderBottom  labelWidth="80">
						<u--input v-model="model1.phone" border="none" placeholder="请输入手机号(必填)"></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="intro" borderBottom  >
						<u--textarea placeholder="不低于3个字" v-model="model1.intro" count ></u--textarea>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="点击报名" customStyle="margin-top: 50px" @click="submit" ></u-button>
				
				<u-action-sheet :show="showSex" :actions="actions" title="请选择性别"  @close="showSex = false" @select="sexSelect" >
				</u-action-sheet>
				<u-action-sheet :show="showGuardian" :actions="guardian" title="请选择监护人"  @close="showGuardian = false" @select="guardianSelect" >
				</u-action-sheet>
				<u-action-sheet :show="showGrade" :actions="grade" title="请选择年级"  @close="showGrade = false" @select="gradeSelect" >
				</u-action-sheet>
			</view>
		</view>
		<u-datetime-picker
			:show="showBirthday"
			v-model="value1"
			mode="date"
			@confirm = "born"
			@cancel  = "bornCancel"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showBirthday: false,
				showGuardian:false,
				showGrade:false,
				value1:'',
				labelStyle:{
					'font-size':'10px',
					'color':'red'
				},
				model1: {
					name:'',
					sex:'',
					born_date:'',
					guardian:'',
					grade:'',
					intro:''
				},
				showSex: false,
				birthday: Number(new Date()),
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				guardian:[
					{
						name: '爸爸',
					},
					{
						name: '妈妈',
					}
				],
				grade:[
					{
						name: '小班',
					},
					{
						name: '中班',
					},
					{
						name: '大班',
					},
					{
						name: '学前班',
					}
				],
				
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			
		},
		methods: {
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			sexSelect(e) {
				this.model1.sex = e.name
			},
			guardianSelect(e){
				this.model1.guardian = e.name
			},
			gradeSelect(e){
				this.model1.grade = e.name
			},
			change(e) {
				// console.log(e);
			},
			calendarConfirm(e) {
				console.log(e)
				this.showCalendar = false
				this.model1.hotel = e[0]
			},
			calendarClose(){
				this.showCalendar = false
			},
			codeChange(text) {
				this.tips = text;
			},
			submit() {
				
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			born(e){
				console.log(e)
				var date = new Date(e.value);
				// 格式化日期为所需的字符串形式
				var year = date.getFullYear();
				var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要加1
				var day = date.getDate().toString().padStart(2, '0');
				this.model1.born_date = year+'-'+month+'-'+day
				this.showBirthday = false
			},
			bornCancel(){
				this.showBirthday = false
			},
		},
	}
</script>

<style lang="scss">
.u-page{

	
}
.u-demo-block{
	
	border-radius: 20rpx;
	padding:20rpx;
	background-color:white;
}
</style>
